<template>
    <div class="article-lists">
        <el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="启用状态">
                    <el-select class="w-[280px]" v-model="queryParams.type">
                        <el-option label="全部" :value="0"/>
                        <el-option label="已支付" :value="1"/>
                        <el-option label="已退款" :value="2"/>
                    </el-select>
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
        <el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                <el-table-column label="单号" prop="sn" min-width="180" >
                    <!-- <template #default="{ row }">
                            <el-link type="primary" @click="() => {
                                $router.push({ path: getRoutePath('server.server/orderList'), query: { sn: row.sn } })
                            }">{{ row.sn }}</el-link>
                    </template> -->
                </el-table-column>
                <el-table-column label="账号" prop="account" min-width="160" />
                <el-table-column label="服务商名称" prop="real_name" min-width="160" />
                <el-table-column label="服务类型" prop="cate_name" min-width="160" />
                <el-table-column label="保证金" prop="actual_money" min-width="160" />
                <el-table-column label="支付方式" prop="pay_type" min-width="160" >
                    <template #default="{ row }">
						<span>{{ payType(row.pay_type) }}</span>
					</template>
                </el-table-column>
                <el-table-column label="保证金状态" prop="status" min-width="160" >
                    <template #default="{ row }">
						<span>{{ payTxt(row.status) }}</span>
					</template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="190" />
                <el-table-column label="退回时间" prop="back_time" min-width="190" >
                    <template #default="{ row }">
						<span v-if="row.back_time">{{ row.back_time }}</span>
                        <span v-else>-</span>
					</template>
                </el-table-column>
                <!-- <el-table-column label="关联流水单号" prop="money" min-width="190" >
                    <template #default="{ row }">
                            <el-link type="primary" @click="() => {
                                $router.push({ path: getRoutePath('server.server/orderList'), query: { sn: row.from_sn } })
                            }">{{ row.from_sn }}</el-link>
                    </template>
                </el-table-column> -->
                
            </el-table>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="userList">
    import { bondOrderList } from '@/api/service';
    import { usePaging } from '@/hooks/usePaging';
    import {getRoutePath} from '@/router'

    const payTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
				case 0: txt = '未支付保证金';break;
				case 1: txt = '已支付保证金';break;
				case 2: txt = '已退保证金';break;
			}
			return txt;
		})
	}
    const payType = (num:any) => {
        return computed(():string=>{
            let txt = '';
            switch(num) {
                case 1: txt = '微信';break;
                case 2: txt = '支付宝';break;
                case 4: txt = '钱包 ';break;
                case 5: txt = '小程序 ';break;
            }
            return txt;
        })
    }
    const queryParams = reactive({
		type: 0,
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: bondOrderList,
		params: queryParams
	})
    getLists()
</script>